<template>
    <el-header>
    <div class="tab" @click="tabSwitchHeader">|&nbsp;|&nbsp;|</div>
    <div>
        <img src="../../../assets/img/login.jpg" alt="">
        <span>电商后台管理系统</span>
    </div>
    <el-button type="primary" @click="logout" size="mini">退出</el-button>
    </el-header>
</template>

<script>
    export default {
        name: "HomeHeader",
        methods:{
            logout(){
                sessionStorage.clear();
                this.$router.replace('/login');
                this.$message.success('退出登录')
            },
            tabSwitchHeader(){
                this.$bus.$emit('switch')
            }
        }
    }
</script>

<style scoped lang="less">
    .el-header {
        display: flex;
        align-items: center;
        width: 100%;
        background-color: #cccccc;
        justify-content: space-between;
        .tab{
            display: block;
            font-size: 1.6rem;
        }
        > div {
            display: flex;
            align-items: center;
            > img {
                width: 6rem;
                height: 6rem;
                border-radius: 50%;
            }
            > span{
                margin-left: 0.5rem;
                font-size: 1.6rem;
            }
        }
    }

    @media only screen and(min-width: 1200px){
        .el-header {
            .tab{
                display: none;
            }
            > div {
                > img {
                    width: 3rem;
                    height: 3rem;
                }

                > span {
                    font-size: 1.0rem;
                    margin-left: 1rem;
                }
            }
        }
    }
</style>